<template>
	<view class="component">
		<u-popup v-model="show" mode="center" :custom-style="customStyle" :border-radius="20">
			<view class="popup">
				<view class="title">领取成功</view>
				<view class="content">优惠券已领取成功，</view>
				<view class="content">可前往【我的卡券】查看优惠券信息！</view>
				<view class="btns">
					<view class="btn" @click="handler('cancel')">继续领券</view>
					<view class="btn confirm" @click="handler('confirm')">立即兑换</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				customStyle: {
					backgroundColor: 'transparent'
				},
			}
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			value: {
				handler: function(val) {
					this.show = val
				},
				immediate: true,

			},
			show(val) {
				if (val != this.value) {
					this.$emit("update:value", val)
				}
			}
		},
		methods: {
			handler(event) {
				this.show = false
				this.$emit(event)
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		width: 710rpx;
		overflow: hidden;
		padding: 60rpx;
		box-sizing: border-box;
		@extend .flex-center;
		flex-direction: column;
		.title{
			font-size: 36rpx;
			font-weight: bold;
			margin: 30rpx 0;
		}
		.content{
			font-size: 28rpx;
			color: #333333;
		}
		.btns{
			@extend .flex-btw;
			width: 100%;
			.btn{
				width: 234rpx;
				@extend .flex-center;
				padding: 23rpx;
				color: #FF9500;
				border: 1px solid #979797;
				margin-top: 78rpx;
				border-radius: 8rpx;
				font-size: 32rpx;
				font-weight: bold;
				&.confirm{
					border: none;
					color: #FFFFFF;
					background-color: #FF9500;
				}
			}
		}
	}
</style>
